<template>
  <div class="code-task">
    <!--统计面板部分-->
    <div>
      <el-row :gutter="12">
        <el-col v-for="(item,index) in cardList" :key="index" :span="8">
          <div class="m-card">
            <div class="m-card-info">
              <div class="m-card-info-title">{{item.title}}</div>
              <div class="m-card-info-content">
                <span :style="{color: item.color}" class="m-card-info-content-number">{{item.num}}</span>
                个任务
              </div>
            </div>
            <img :src="require(`@/assets/images/addressSegment/${item.img}.png`)" alt="" class="m-card-img">
          </div>
        </el-col>
      </el-row>
    </div>

    <!--列表查询部分-->
    <div class="query-table">
      <el-form class="el-row" label-width="100px">
        <el-form-item label="数据范围：" class=" el-col-5">
          <district-select v-model="dataRange" @change="changeUnit" />
        </el-form-item>
        <el-form-item label="任务状态：" class=" el-col-5 el-col-offset-1">
          <el-select v-model="queryForm.status">
            <el-option v-for="item in typeList" :label="item" :value="item" clearable></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label-width="0" class=" el-col-1">
          <el-button type="primary" @click="queryTable">查询</el-button>
        </el-form-item>
        <el-form-item class=" el-col-8 el-col-offset-4" style="text-align: right;">
          <el-button type="primary" @click="dialogUnifyVisible = true"> 统一编码</el-button>
          <el-button type="primary">一码多址替换</el-button>
          <el-button type="primary" @click="dialogVisible = true">一码多址匹配</el-button>
        </el-form-item>
      </el-form>

      <el-table :data="taskTableData" header-row-class-name="table-header" height="550" stripe>
        <el-table-column align="center" label="序号" type="index"></el-table-column>
        <el-table-column align="center" label="任务名称" prop="name"></el-table-column>
        <el-table-column align="center" label="任务类型" prop="checkType"></el-table-column>
        <el-table-column align="center" label="数据范围" prop="unit"></el-table-column>
        <el-table-column align="center" label="创建时间" prop="createTime"></el-table-column>
        <el-table-column align="center" label="完成时间" prop="updateTime"></el-table-column>
        <el-table-column align="center" label="创建人" prop="user"></el-table-column>
        <el-table-column align="center" label="状态">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status === '已完成' ? 'success':''">{{scope.row.status}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="{row}">
            <el-button type="text" @click="openTaskDetail(row)">详情</el-button>

            <span style="color:#F56C6C;margin-left:10px" @click="deleteTask(row.id)">删除</span>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination :page-size="page.size" :total="total" background layout="total,prev, pager, next" style="text-align: right;margin-top: 12px" @current-change="pageChange"></el-pagination>
    </div>

    <el-dialog title="创建一码多址匹配" :visible.sync="dialogVisible" :close-on-click-modal="false" width="600px">
      <match-dialog v-if="dialogVisible" @closeDialog="closeDialog"></match-dialog>
    </el-dialog>

    <el-dialog title="创建统一编码赋码" :visible.sync="dialogUnifyVisible" :close-on-click-modal="false" width="1000px">
      <unify-dialog v-if="dialogUnifyVisible" @closeUnifyDialog="closeUnifyDialog"></unify-dialog>
    </el-dialog>
  </div>
</template>

<script>
import matchDialog from './matchDialog.vue'
import unifyDialog from './unifyDialog.vue'
import districtSelect from '../districtSelect.vue'

import { getTaskList, getStatistics, taskDelete } from '@/api/oneCodeAddress'

export default {
  data () {
    return {
      cardList: [
        {
          title: "全部任务",
          num: 0,
          color: "#4C94FE",
          img: "all-task",
        },
        {
          title: "进行中的任务",
          num: 0,
          color: "#6962FE",
          img: "running-task",
        },
        {
          title: "已完成任务",
          num: 0,
          color: "#30C68A",
          img: "completed-task",
        }
      ],
      typeList: ['已完成', '进行中'],
      page: {
        page: 1,
        size: 10
      },
      total: 0,
      taskTableData: [],
      dialogVisible: false,
      dialogUnifyVisible: false,
      dataRange: [],
      queryForm: {
        unit: '',
        status: ''
      }
    }
  },
  methods: {
    changeUnit (value) {
      this.queryForm.unit = value[value.length - 1]
    },
    // 页面切换
    pageChange (pageNum) {
      this.page.page = pageNum
      this.queryTable()
    },
    async queryTable () {
      const req = {
        ...this.page,
        type: '3'
      }
      const res = await getTaskList(req)
      if (res && res.status === 200) {
        this.taskTableData = res.data.records
        this.total = res.data.total
      } else {
        this.taskTableData = []
        this.total = 0
      }
    },
    async getStatisticsData () {
      try {
        const res = await getStatistics({ type: '3' })
        if (res && res.status === 200) {
          this.cardList[0].num = res.data.allTask
          this.cardList[1].num = res.data.Tasking
          this.cardList[2].num = res.data.ending
        } else {

        }
      } catch (error) {

      }
    },
    openTaskDetail (data) {
      let route = 'detail'
      if (data.checkType === '统一编码赋码') {
        route = 'unify'
      }
      this.$router.push(`/one-code-access/${route}/${data.id}?name=${data.name}&createTime=${data.createTime}&unit=${data.unit}`)
    },
    closeDialog () {
      this.dialogVisible = false
      this.queryTable()
    },
    closeUnifyDialog () {
      this.dialogUnifyVisible = false
      this.queryTable()
    },
    async deleteTask (id) {
      let confirm = await this.$confirm('是否删除当前任务', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      if (confirm) {
        const res = await taskDelete({ id })
        if (res.status === 200) {
          this.$message.success('删除成功')
          this.queryTable()
        } else {
          this.$message.error('删除失败')
        }
      }
    },
  },
  components: {
    matchDialog, districtSelect, unifyDialog
  },
  created () {
    this.queryTable()
    this.getStatisticsData()
  }
}
</script>

<style lang="less">
@import url("../main.less");
.code-task {
  position: relative;
  height: 100%;
  width: 100%;
}
</style>